<template>
	<div class="rightcontainer">
		<div class="rightmain">
			<div class="header">个人资料</div>
			<el-form ref="form" :model="form" label-width="97px">
				<div class="bigform">
					<div class="form">
						<el-form-item label="姓 名">
							<el-input v-model="form.nickName" placeholder="请输入姓名"></el-input>
						</el-form-item>
						<el-form-item label="身份证号">
							<el-input v-model="form.userName" placeholder="请输入身份证号"></el-input>
						</el-form-item>
						<el-form-item label="民 族">
							<el-select v-model="form.nation" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in nations" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="最高学历">
							<el-select v-model="form.education" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in xuelis" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="专 业">
							<el-input v-model="form.zhuanye" placeholder="请填写专业"></el-input>
						</el-form-item>
						<el-form-item label="是否统招">
							<el-radio-group v-model="form.recruitment">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="毕业时间">
							<el-date-picker v-model="form.schoolTime" type="month" placeholder="请选择" class="w100" value-format="yyyy-MM">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="电子邮箱">
							<el-autocomplete class="w100"
							    v-model="form.email"
							    :fetch-suggestions="querySearchEmail"
							    :trigger-on-focus="false"
							    placeholder="请输入邮箱"
							>
							</el-autocomplete>
							<!-- <el-input v-model="form.email" placeholder="请输入邮箱"></el-input> -->
						</el-form-item>
						<el-form-item label="工作单位">
							<el-input v-model="form.company" placeholder="请输入工作单位"></el-input>
						</el-form-item>
						<el-form-item label="工作岗位">
							<el-input v-model="form.zhiwu" placeholder="请输入工作岗位"></el-input>
						</el-form-item>
					</div>
					<div class="form">
						<el-form-item label="报名照片" style="margin-bottom:0;">
							<el-upload class="avatar-uploader" :action="uploadbaseurl+'/file/admin/uploadFileExamExam'"
								:headers="uploadheaders" :data="{typeEnum:'8',subjectType:'0'}" :show-file-list="false"
								:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
								<img v-if="form.avatar" :src="form.avatar" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
							<span class="tips1">注：近期1寸/2寸证件照</span>
						</el-form-item>
						<el-form-item label="年 龄">
							<el-input :value="autoage" disabled></el-input>
						</el-form-item>
						<el-form-item label="性 别">
							<el-radio-group v-model="form.sex">
								<el-radio label="0">男</el-radio>
								<el-radio label="1">女</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="政治面貌">
							<el-select v-model="form.zhegnzhiType" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in politics" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="毕业院校">
							<el-input v-model="form.school" placeholder="请填写毕业院校"></el-input>
						</el-form-item>
						<el-form-item label="学 位">
							<el-select v-model="form.degree" placeholder="请选择" class="w100">
								<el-option v-for="(item,index) in degs" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="是否全日制">
							<el-radio-group v-model="form.fullEducation">
								<el-radio label="1">是</el-radio>
								<el-radio label="2">否</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="联系电话">
							<el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
						</el-form-item>
					</div>
				</div>
				<el-form-item label="通讯地址">
					<el-cascader v-model="areaarr" :options="areajson" :props="{value:'id',label:'name'}" style="width:333px;float:left;" clearable></el-cascader>
					<el-input v-model="form.address" placeholder="请填写详细地址" style="float:left;width:470px;margin-left:20px;"></el-input>
				</el-form-item>
				<el-form-item label="教育经历">
					<el-table border :data="form.eduExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
						<el-table-column label="开始时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.startdate" type="month" placeholder="开始时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="结束时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.enddate" type="month" placeholder="结束时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="学校名称" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.school" placeholder="学校名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="学历" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.education" placeholder="学历"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="专业" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.special" placeholder="专业"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="" width="50" align="center">
							<template slot-scope="scope">
								<i class="el-icon-remove" style="color:#f00;font-size:18px;" @click="delrow(scope.$index,'eduExperience')"></i>
							</template>
							
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-circle-plus" style="float:right;margin-top:12px;" size="small" @click="addrow('eduExperience')">增加</el-button>
				</el-form-item>
				<el-form-item label="工作经历">
					<el-table border :data="form.workExperience" stripe style="width: 100%" :header-cell-style="{backgroundColor: '#a4d0f4', color: '#134B9F', fontWeight: 'bold',height:'48px',}">
						<el-table-column label="开始时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.startdate" type="month" placeholder="开始时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="结束时间" align="left" header-align="center">
							<template slot-scope="scope">
								<el-date-picker v-model="scope.row.enddate" type="month" placeholder="结束时间" style="width:100%;" value-format="yyyy-MM"></el-date-picker>
							</template>
						</el-table-column>
						<el-table-column label="单位名称" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.company" placeholder="单位名称"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="岗位" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.job" placeholder="岗位"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="岗位职责" align="left" header-align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.jobwork" placeholder="岗位职责"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="" width="50" align="center">
							<template slot-scope="scope">
								<i class="el-icon-remove" style="color:#f00;font-size:18px;" @click="delrow(scope.$index,'workExperience')"></i>
							</template>
							
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-circle-plus" style="float:right;margin-top:12px;" size="small" @click="addrow('workExperience')">增加</el-button>
				</el-form-item>
			</el-form>
			<div class="savebtn">
				<el-button type="info" style="margin-right:30px;" @click="goback">返 回</el-button>
				<el-button type="primary" class="infobtn" @click="tosave">保 存</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import config from "@/js/config";
	import Utils from "@/js/utils";
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				areajson:[],
				areaarr:[],
				nations: [],
				politics: [],
				degs: [],
				xuelis:[],
				uploadbaseurl: config.url,
				staticbaseurl: config.staticurl,
				uploadheaders: {
					Authorization: Utils.getToken()
				},
				form: {
					id:null,
					nickName: '',
					userName: '',
					nation: null,
					education: null,
					zhuanye: '',
					recruitment: null,
					schoolTime: null,
					email: '',
					phone: '',
					avatar: '',
					sex: '',
					zhegnzhiType: null,
					school: '',
					degree: null,
					fullEducation: null,
					address:'',
					sheng:'',
					shi:'',
					qu:'',
					eduExperience:[],
					workExperience:[],
					company:'',
					zhiwu:''
				}
			};
		},
		computed: {
			autoage(){
				let idNumber=this.form.userName
				if (!idNumber || idNumber.length !== 18) {
					return ''
				}
			 
				const today = new Date();
				const birthDate = new Date(idNumber.substring(6, 10), idNumber.substring(10, 12) - 1, idNumber.substring(12, 14));
			 
				let age = today.getFullYear() - birthDate.getFullYear();
				const m = today.getMonth() - birthDate.getMonth();
				if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
					age--;
				}
				return age;
			}
		},
		watch:{
			areaarr(newarr,oldarr){
				if(newarr.length==3){
					this.form.sheng=newarr[0]
					this.form.shi=newarr[1]
					this.form.qu=newarr[2]
				}else{
					this.form.sheng=null
					this.form.shi=null
					this.form.qu=null
				}
			}
		},
		mounted() {
			this.getbaseinfo()
			this.getnation()
			this.getface()
			this.getdegs()
			this.getxueli()
			this.getareajson()
		},
		methods: {
			...mapMutations(['phoneHandle','headHandle']),
			querySearchEmail(queryString, callback) {
			    const emailList = [
			        { value: '@qq.com' },
			        { value: '@126.com' },
			        { value: '@163.com' },
			        { value: '@sina.com' },
			        { value: '@21cn.com' },
			        { value: '@sohu.com' },
			        { value: '@yahoo.com.cn' },
			        { value: '@tom.com' }, 
			        { value: '@etang.com' },
			        { value: '@eyou.com' },
			        { value: '@56.com' },
			        { value: '@x.cn' },
			        { value: '@chinaren.comsogou.com' },
			        { value: '@citiz.com' },
			    ]
			    let results = []
			    let queryList = []
			    emailList.map(item => {
			        queryList.push({ value: queryString.split('@')[0] + item.value })
			    })
			    results = queryString ? queryList.filter(this.createFilter(queryString)) : queryList;
			    callback(results);            
			},
			goback(){
				this.$router.back()
			},
			// 邮箱填写过滤
			createFilter(queryString) {
			    return (item) => {
			        return (item.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
			    };
			},
			delrow(index, table = 'eduExperience') {
			    this.form[table].splice(index, 1)
			},
			addrow(table = 'eduExperience') {
				if(table=='eduExperience'){
					var item = {
					    'startdate': '',
					    'enddate': '',
						'school':'',
						'education':'',
						'special':''
					}
				}else{
					var item = {
					    'startdate': '',
					    'enddate': '',
						'company':'',
						'job':'',
						'jobwork':''
					}
				}
				if(typeof this.form[table] === "object" && Array.isArray(this.form[table])){
				}else{
					this.form[table]=[]
				}
			    console.log(this.form[table],777)
			    this.form[table].push(item)
			},
			getbaseinfo(){
				this.$api.Usercenter.Getuserinfo().then(res=>{
					this.form.id=res.data.id
					this.form.avatar=res.data.avatar
					this.form.degree=res.data.degree
					this.form.education=res.data.education
					this.form.email=res.data.email
					if(res.data.fullEducation){
						this.form.fullEducation=res.data.fullEducation+''
					}
					
					this.form.zhuanye=res.data.zhuanye
					this.form.nation=res.data.nation
					this.form.phone=res.data.phone 
					this.form.zhegnzhiType=res.data.zhegnzhiType 
					if(res.data.recruitment){
						this.form.recruitment=res.data.recruitment+''
					}
					
					this.form.school=res.data.school
					this.form.schoolTime=res.data.schoolTime
					this.form.nickName=res.data.nickName
					this.form.userName=res.data.userName
					this.form.sex=res.data.sex
					this.form.company=res.data.company
					this.form.zhiwu=res.data.zhiwu
					this.form.address=res.data.address
					this.form.eduExperience=JSON.parse(res.data.eduExperience)
					this.form.workExperience=JSON.parse(res.data.workExperience)
					if(res.data.sheng && res.data.shi && res.data.qu){
						this.areaarr=[res.data.sheng,res.data.shi,res.data.qu]
						this.form.sheng=res.data.sheng
						this.form.shi=res.data.shi
						this.form.qu=res.data.qu
					}
				})
			},
			async tosave(){
				var zform=JSON.parse(JSON.stringify(this.form))
				zform.eduExperience=JSON.stringify(zform.eduExperience)
				zform.workExperience=JSON.stringify(zform.workExperience)
				try{
					var res=await this.$api.Usercenter.Edituserinfo(zform)
					this.$message.success('保存成功')
					this.phoneHandle(zform.phone)
					this.headHandle(zform.avatar)
				}catch(e){
					this.$message.error(e.msg)
				}
			},
			handleAvatarSuccess(res, file) {
				this.form.avatar = this.staticbaseurl+res.msg
			},
			beforeAvatarUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!');
				}
				return isLt2M;
			},
			getnation() {
				this.$api.Join.Getnation({ code: 'nation' }).then(res => {
					this.nations = res.data.items
				})
			},
			getdegs() {
				this.$api.Join.Getdegs({ code: 'academic_degree' }).then(res => {
					this.degs = res.data.items
				})
			},
			getareajson() {
				this.$api.Usercenter.Getareajson().then(res => {
					this.areajson=res.data
				})
			},
			getxueli() {
				this.$api.Join.Getxueli({ code: 'education' }).then(res => {
					this.xuelis = res.data.items
				})
			},
			getface() {
				this.$api.Join.Getface({ code: 'politics' }).then(res => {
					this.politics = res.data.items
				})
			},
		},
	};
</script>

<style lang="less" scoped>
	/deep/ .el-table__header {
	  height: 48px !important;
	  
	}
	/deep/ .el-table__header .el-table__cell{
		padding: 2px 0 !important;
	}
	/deep/ .el-form-item__label {
		text-align: left !important;
	}

	.tips1 {
		color: #f00;
		font-size: 13px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.tips {
		color: #f00;
		font-size: 13px;
		position: absolute;
		left: 0;
		bottom: -29px;
	}

	.rightcontainer {
		width: 920px;
		margin: 0 auto 40px;
		overflow: hidden;

		.w100 {
			width: 100%;
		}

		.rightmain {
			width: 100%;
			margin: 20px 0;

			
			.savebtn{
				display:flex;
				justify-content:center;
				align-items:center;
				width:100%;
				height:80px;
				.infobtn{
						background-color:#134B9F;
						border:none;
					}
			}
			.header {
				color: #134B9F;
				font-size: 20px;
				line-height: 18px;
				font-weight: bold;
				padding-bottom: 9px;
				border-bottom: 2px solid #134B9F;
				display: inline-block;
				letter-spacing: 2px;
				margin-bottom: 10px;
			}
			.bigform {
				width: 100%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20px;
				// margin-bottom: 15px;
				.form {
					width: 430px;
					min-height: 300px;

					/deep/ .avatar-uploader .el-upload {
						border: 1px dashed #d9d9d9;
						border-radius: 6px;
						cursor: pointer;
						position: relative;
						overflow: hidden;
					}

					/deep/ .avatar-uploader .el-upload:hover {
						border-color: #409EFF;
					}

					/deep/ .avatar-uploader-icon {
						font-size: 28px;
						color: #8c939d;
						width: 168px;
						height: 168px;
						line-height: 168px;
						text-align: center;
					}

					/deep/ .avatar {
						width: 168px;
						height: 168px;
						display: block;
					}
				}

			}
		}
	}
</style>
